<template>
	<view>
		<view class="topBanner">
			<image @click="back" class="back" :src="$img('/static/my/myBack/back.png')" mode=""></image>
			<view class="title">
				我的钱包
			</view>
		</view>
		<view class="moneyBox">
			<view class="myMoneyBox">
				<view class="myMoney">
					我的余额(元)
				</view>
				<image @click="toWithdrawal" class="spot" :src="$img('/static/2021-08-30/diandiandian.png')" mode=""></image>
			</view>
			<view class="balance">
				{{balance}}
			</view>
			<view class="recharge" @click="toCharge">
				充值余额
			</view>
		</view>
		<view class="myOrder">
			<view class="orderTitle">
				我的账单
			</view>
			<view class="oderHistory" v-for="(item,index) in orderList" :key="index">
				<view class="orderList">
					<image class="monenIcon" :src="$img('/static/2021-08-30/qdz.png')" mode=""></image>
					<view class="oderDetail">
						<view class="explain">
							{{item.content}}
						</view>
						<view class="orderDate">
							{{item.created_at}} 
						</view>
					</view>
					<view class="num add" v-if="item.type === 1">
						<!-- <image style="height: 13rpx;width: 13rpx;" src="../../../../static/my/myBack/add.png" mode=""></image> -->
						+{{item.price}}
					</view>
					<view class="num reduce" v-else>
						<!-- <image style="height: 3rpx;width: 13rpx;" src="../../../../static/my/myBack/reduce.png" mode=""></image> -->
						-{{item.price}}
					</view>
				</view>
				<view class="line"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance:0.00,
				orderList:[],
				orderType:[ "充值","消费","提现"],
				orderWay:["微信","支付宝","余额","发红包","收红包提现"],
				next:true,
				page:1
			}
		},
		onShow() {
			this.getMyBalance()
			this.orderList=[];
			this.getMyOrder()
		},
		onReachBottom() {
			this.page = this.page+1
			this.getMyOrder()
		},
		methods: {
			toWithdrawal(){
				uni.navigateTo({
					url:'../withdrawal/withdrawal'
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getMyOrder(){
				let that = this
				let data = {
					page:this.page
				}
				this.$utils.postrequest("/api/user_wallet/user_bill", data, function(res) {
					// console.log(res)
					if (res.code == 200) {
						if (that.canPullDownRefresh) {
							uni.stopPullDownRefresh(); //停止下拉刷新动画
						}
						setTimeout(() => {
							that.orderList = that.orderList.concat(res.data)
							uni.hideLoading()
						}, 300)
					}
				})
			},
			getMyBalance(){
				this.$utils.request('/api/user_wallet','',res=>{
					if(res.code == 200){
						this.balance = res.data
					}
					else {
						uni.showToast({
							icon:'none',
							title:'请检查网络'
						})
					}
				})
			},
			toCharge(){
				uni.navigateTo({
					url:"../rechargeBalance/rechargeBalance"
				})
			},
		}
	}
</script>

<style>
	
	.back {
		width: 18rpx;
		height: 32rpx;
		position: absolute;
		top: 81rpx;
		left: 28rpx;
	}
	
	.topBanner {
		background-size: cover;
		background-position: center;
		margin-top: 0rpx;
		height: 334rpx;
		width: 750rpx;
		background-image: url(https://sx.hualin688.com/storage/2021-09-02/6130894170fea.png);
		
	}

	.title {
		margin: 0 auto;
		padding-top: 79rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		
		color: #FAFAFC;
		line-height: 25rpx;
	}

	.moneyBox {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 167rpx;
		background-image: url(https://sx.hualin688.com/storage/2021-09-03/6131f96acbaa8.png);
		height: 333rpx;
		width: 700rpx;
		background-size: cover;
		background-position: center;
		margin-left: 25rpx;
		border-radius: 10%;
	}

	.myMoney {
		font-size: 32rpx;
		font-family: PingFang SC;
		
		color: #AFB7CC;
		margin-top: 40rpx;
		margin-left: 53rpx;
	}
	
	.myMoneyBox {
		display: flex;
		flex-direction: row;
	}

	.balance {
		font-size: 48rpx;
		font-family: PangMenZhengDao;
		font-weight: 400;
		color: #333333;
		margin-top: 40rpx;
		margin-left: 53rpx;
	}

	.recharge {
		margin-top: 40rpx;
		margin-left: 53rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.myOrder {
		margin-top: 166rpx;
		margin-left: 25rpx;
	}

	.orderTitle {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3F3F3F;
	}

	.oderHistory {
		margin-top: 37rpx;
		display: flex;
		flex-direction: column;
	}

	.orderList {
		display: flex;
		flex-direction: row;
	}
	
	.monenIcon {
		height: 76rpx;
		width: 76rpx;
	}
	
	.oderDetail {
		margin-left: 12rpx;
	}
	
	.explain {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	
	.orderDate {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #A2A1A0;
		margin-top: 10rpx;
	}
	
	.num {
		position: absolute;
		right: 33rpx;
		font-size: 33rpx;
		font-family: PingFang SC;
		
		display: flex;
		align-items: center;
	}
	
	.add {
		color: #FA4600;
	}
	
	.reduce {
		color: #000;
	}
	
	.line {
		width: 722rpx;
		height: 1rpx;
		background: #DCDCDC;
		margin-top: 40rpx;
	}
	
	.spot {
		height: 8rpx;
		width: 47rpx;
		margin-top: 40rpx;
		position: absolute;
		right: 54rpx;
	}
</style>
